<template>
  <div class="server">
      <div class="customerService" style="padding:200px">
<!--     <div style="text-align: center">
      <h1>客服设置</h1>
    </div> -->
    <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="150">
        <FormItem label="我的页面背景图" prop="vip_bg">
            <template>
               <upload-img 
                @handleSuccess="(value)=>{return handleSuccess(value)}"  
                :formStyle="formStyle" 
                :imgUrl.sync = "formInline.vip_bg" 
               >          
               </upload-img>
            </template>
        </FormItem>
        <FormItem label="" prop="">
            *建议上传尺寸320*110
        </FormItem>
        <FormItem label="我的背景图链接" prop="vip_ad">
            <Input v-model="formInline.vip_ad">
                <span slot="prepend">http://</span>
            </Input>
        </FormItem>
        <!-- <tinymce  ref="editor" v-model = "formInline.content"></tinymce> -->
        <FormItem style="text-align: center;margin-top:20px">
            <Button type="primary" @click="handleSubmit('formInline')">完成</Button>
        </FormItem>
    </Form>
  </div>
  </div>
</template>
<script>
import uploadImg from '@/components/uploadImg'
import tinymce from '@/components/tinymce'
export default {
   data() {
    return {
      formStyle:'width:320px;height:110px;line-height:110px',
      formInline: {
        vip_bg:'',
        vip_ad:''
      },
      ruleInline: {
          vip_bg: [
              { required: true, message: '请上传背景图', trigger: 'blur' },
          ],
          vip_ad: [
              { required: true, message: '背景图链接', trigger: 'blur' },
          ],
      }
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    handleSuccess(value) {
      this.formInline.vip_bg =  value  // 上传图片的路径名
    },
    getDatas(){
      let params = {
         opt: 1
      }
      this.$api.getseverdetail(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.formInline.vip_bg = res.data.vip_bg
              this.formInline.vip_ad = res.data.vip_ad
          }
      })
    },
    handleSubmit(value){
        let params = {
          vip_bg:this.formInline.vip_bg,
          vip_ad:this.formInline.vip_ad,
        };
        this.$api.editsever(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success('设置成功');
              this.getDatas();
            }
        })    
    },
  },
  components: {
    tinymce,
    uploadImg
  }
}
</script>
<style lang="less" scoped>
    @import './headbg.less';
</style>
